<template>
  <div class="app-container">

    <el-row :gutter="10" class="mb8 toolbar">
      <el-col :span="2">
        <el-button @click="handleAdd" class="repository">
          添加仓库
        </el-button>
      </el-col>
      <right-toolbar @queryTable="Refresh"></right-toolbar>
    </el-row>

    <vxe-table ref="table" :data="tableData.list" :loading="tableData.loading" stripe>
      <vxe-column field="warehouseNo" title="编码" width="150" align="center" />
      <vxe-column field="warehouseName" title="名称" width="260" align="center" />
      <vxe-column field="address" title="地址" align="center" />
      <vxe-column title="操作" width="200" align="center">
        <template #default="{ row }">
          <el-button size="small" @click="handleUpdate(row)">修改</el-button>
          <el-button size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <div class="pagination-container">
      <pagination v-show="tableData.paging.total > 0" :total="tableData.paging.total"
        v-model:page="tableData.paging.pageNum" v-model:limit="tableData.paging.pageSize" @pagination="getList" />
    </div>

    <edit ref="editDialog" @sub="onEditSub"></edit>
  </div>
</template>

<script setup>

import { ref, reactive } from "vue";

import { onMounted } from "vue";
import api from "./api.js";
import Edit from './edit'

const { proxy } = getCurrentInstance();

const editDialog = ref();

// 遮罩层
const loading = ref(false);
const table = ref();
const tableData = reactive({
  loading: false,
  list: [], // 表格列表数据
  paging: {
    total: 0, // 总条数
    pageNum: 1,
    pageSize: 10,
  }
});

const initQueryParams = {
  pageNum: 1,
  pageSize: 10,
  number: null,
  name: null,
  categoryId: null,
  rfid: null,
  brand: null,
  model: null,
  buyWay: null,
  buyTime: null,
  buyPrice: null,
  adminId: null
}

const queryParams = reactive({ ...initQueryParams })

/** 查询资产清单表列表 */
async function getList() {
  loading.value = true;
  const { pageNum, pageSize } = tableData.paging;
  const query = { ...queryParams };
  const pageReq = { page: pageNum - 1, size: pageSize };
  api.list(query, pageReq).then(response => {
    const { content, totalElements } = response
    tableData.list = content;
    tableData.paging.total = totalElements;
    tableData.loading = false;
  }).catch(error => {
    tableData.loading = false;
    console.log(error);
  });
}
function Refresh() {
  getList();
  proxy.$message.success("刷新成功");
}
/** 新增按钮操作 */
function handleAdd() {
  editDialog.value.open();
}

/** 修改按钮操作 */
function handleUpdate(row) {
  editDialog.value.open(row);
}

/** 编辑窗口提交后的操作 */
function onEditSub() {
  getList();
}

/** 删除按钮操作 */
function handleDelete(row) {
  const ids = row.id || this.ids;
  proxy.$modal.confirm('是否确认删除资产清单表编号为"' + ids + '"的数据项？').then(function () {
    return api.del(ids);
  }).then(() => {
    this.getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => { });
}

/** 导出按钮操作 */
function handleExport() {
  const queryParams = this.queryParams;
  this.$modal.confirm('是否确认导出所有资产清单表数据项？').then(() => {
    this.exportLoading = true;
    return exportAssetItem(queryParams);
  }).then(response => {
    this.$download.download(response);
    this.exportLoading = false;
    this
  }).catch(() => { });
}

// 页面打开后获取列表数据
onMounted(async () => {

  await getList();

});

</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 92vh;
  overflow: hidden;
  background-color: #f5f7fa;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.toolbar {
  margin-bottom: 10px;
}

.vxe-table {
  flex: 1;
  overflow: auto;
  height: 600px;
  background-color: #fff;
  border: 1px solid #eaecef;
  border-radius: 4px;
}
.repository{
  width: 73.6px;
  height: 31.6px;
  background-color: #005bf5;
  color: #fff;
  border-radius: 8%;
  font-size: 12px;
}
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.el-button {
  margin-left: 5px;
  transition: background-color 0.3s ease;
}

.el-button:hover {
  opacity: 0.85;
}
.pagination-container{
  width: 100%;
}
</style>